<template>
    <!-- 把该标签里所有的内容,在页面上给我渲染到 .jd-header这个标签里面 -->
    <Teleport to=".jd-header">
        <van-nav-bar class="top" :title="title" :left-arrow="back">
            <template #left>
                <slot name="left">
                    <van-icon class="back-btn" name="arrow-left" @click="handler" />
                </slot>
            </template>
            <template #title>
                <slot name="title">{{ title }}</slot>
            </template>
            <template #right>
                <slot name="right"></slot>
            </template>
        </van-nav-bar>
    </Teleport>
</template>

<script setup lang="ts">
import type { defineProps, Teleport } from 'vue';
import { useRouter } from 'vue-router'
const $router = useRouter()
const handler = () => {
    $router.go(-1)
}

interface MyTopBar {
    title: string,
    back?: boolean
}
// 接收父组件传递的数据
defineProps<MyTopBar>()
</script>
<style scoped lang="scss">
.back-btn {
    font-size: 24px;
    color: black !important;
}
</style>